<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/style.css" />
		<style>
		.wrapper {display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; box-sizing: border-box; margin: 60px auto 30px; }

.green .progress, .red .progress, .orange .progress {position: relative; border-radius: 50%; }
.green .progress, .red .progress, .orange .progress {width: 150px; height: 150px; overflow: hidden; }
.green .progress, .red .progress, .orange .progress {-webkit-transition: all 1s ease; transition: all 1s ease; }
.green .progress .inner, .red .progress .inner, .orange .progress .inner {position: absolute; overflow: hidden; z-index: 2; border-radius: 50%; }
.green .progress .inner, .red .progress .inner, .orange .progress .inner {width: 140px; height: 140px; }
.green .progress .inner, .red .progress .inner, .orange .progress .inner {-webkit-transition: all 1s ease; transition: all 1s ease; }
.green .progress .inner .water, .red .progress .inner .water, .orange .progress .inner .water {position: absolute; z-index: 1; width: 200%; height: 200%; left: -50%; border-radius: 40%; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-name: spin; animation-name: spin; }
.green .progress .inner .water, .red .progress .inner .water, .orange .progress .inner .water {-webkit-transition: all 1s ease; transition: all 1s ease; }
.green .progress .inner .water, .red .progress .inner .water, .orange .progress .inner .water {-webkit-animation-duration: 10s; animation-duration: 10s; }
.green .progress .inner .glare, .red .progress .inner .glare, .orange .progress .inner .glare {position: absolute; top: -120%; left: -120%; z-index: 5; width: 200%; height: 200%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); border-radius: 50%; }
.green .progress .inner .glare, .red .progress .inner .glare, .orange .progress .inner .glare {background-color: rgba(255, 255, 255, 0.15); }
.green .progress .inner .glare, .red .progress .inner .glare, .orange .progress .inner .glare {-webkit-transition: all 1s ease; transition: all 1s ease; }
.green .progress .inner .percent, .red .progress .inner .percent, .orange .progress .inner .percent {position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-weight: bold; text-align: center; }
.green .progress .inner .percent, .red .progress .inner .percent, .orange .progress .inner .percent {line-height: 140px; font-size: 30px; }
.green .progress .inner .percent, .red .progress .inner .percent, .orange .progress .inner .percent {-webkit-transition: all 1s ease; transition: all 1s ease; }

.green, .red, .orange{margin-top: 15px; }
.green .progress .inner .water {top: 25%; }
.red .progress .inner .water {top: 75%; }
.orange .progress .inner .water {top: 50%; }



.green .progress {border: 5px solid rgba(98,210,162,.2); }
.green .progress {box-shadow: 0 0 20px rgba(98,210,162,.1); }
.green .progress .inner .percent {color: rgba(98,210,162,1); }
.green .progress .inner .water {background: rgba(166,237,142, 0.2); }
.green .progress .inner .water {box-shadow: 0 0 20px rgba(166,237,142, 0.2); }


.red .progress {border: 5px solid rgba(252,52,92,.2); }
.red .progress {box-shadow: 0 0 20px rgba(252,52,92,.2); }
.red .progress .inner .percent {color: rgba(255,20,20,1); }
.red .progress .inner .water {background: rgba(244,190,208, 0.2); }
.red .progress .inner .water {box-shadow: 0 0 20px rgba(244,190,208, 0.2); }



.orange .progress {box-shadow: 0 0 20px rgba(255,154,60,.1);}
.orange .progress {border: 5px solid rgba(255,154,60,.2);  }
.orange .progress .inner .percent {color: rgba(255,154,60,1);}
.orange .progress .inner .water {background: rgba(255,200,60,.2);  }
.orange .progress .inner .water {box-shadow: 0 0 20px rgba(255,200,60,.2); }



@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">专项练习</h1>
		</header>
		
		<div class="mui-content pt20" id="QUEdata">
			<div class="exer_data">
				
				<div class="wrapper">
					<div class="green">
						<div class="progress">
							<div class="inner">
								<div class="percent"><span>{{data.correct_rate}}</span>%</div>
								<div class="water"></div>
							</div>
						</div>
					</div>
				</div>
				
				<div class="list_data">
					<ul>
						<li>
							<p>{{data.count}}</p>
							<p class="grey">总题数</p>
						</li>
						<li>
							<p>{{data.true_num}}</p>
							<p class="grey">正确数</p>
						</li>
						<li>
							<p>{{data.correct_rate}}%</p>
							<p class="grey">正确率</p>
						</li>
					</ul>
				</div>
			</div>
			
			<div class="fengeLine mb0"></div>
			
			<div class="answerSheet">
				<div class="as_tt">
					<div class="as_ltt">
						答题卡
					</div>
					<div class="as_rtt">
						<span><em class="dot_blue"></em>正确</span>
						<span><em class="dot_red"></em>错误</span>
						<span><em class="dot_grey"></em>未答</span>
					</div>
				</div>
				<div class="as_nr">
					<ul>
						<li v-for="(val,index) in data.data" :qid="val.qid" :class="val.trueORfalse == 1 ? 'bg_blue' : val.trueORfalse == 0 ? 'bg_red' : ''">
							<a>{{index+1}}</a>
						</li>
					</ul>
				</div>
			</div>

			<div class="fix_resolve">
				<div class="resolve_box">
					<ul>
						<li class="mistake_view" @click="look_false"><a>查看错题解析</a></li>
						<li class="all_view" @click="look_all"><a>查看全部解析</a></li>
						<!--<li class="new_exercises" @click="reset_questions"><a>再来一套</a></li>-->
					</ul>
				</div>
			</div>
		</div>
		<script src="../../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../../js/h.min.js"></script>
		<script type="text/javascript" src="../../../js/jquery.min.js"></script>
		<script type="text/javascript" src="../../../js/tpl/exercisesResult.js"></script>
		<script src="../../../js/vue.js"></script>
		<script src="../../../js/public.js"></script>
	</body>

</html>